<template>
    <div f-c>
        <el-dropdown v-if="filters.length > 1" @command="setCommand" popper-class="dropdown__item--center">
            <el-button type="primary" radius-r-0>
                <span :style="{width: btnTextWidth}">{{ filterLabel }}</span>
                <el-icon>
                    <ArrowDown/>
                </el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="row in filters" :command="row.value">
                        <div class="text-c">{{ row.label }}</div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-button v-else type="primary" class="button__hover--primary" radius-r-0>{{ filterLabel }}</el-button>
        <el-input
            v-model="keywords"
            @keyup.enter="onChange"
            @clear="onChange"
            :placeholder="`输入${filterLabel}搜索`"
            clearable
            :style="{ width: width }"
        >
            <template #suffix>
                <el-icon @click="onChange" pointer>
                    <Search/>
                </el-icon>
            </template>
        </el-input>
    </div>
</template>

<script setup lang="ts">
    import { ref, computed, watch } from "vue";
    import { ArrowDown, Search } from "@element-plus/icons-vue";
    import { FilterTimesRow, getSearchFilters } from "@/components/globalUtils/GSearch"

    const props = defineProps({
        value: {
            type: Object,
            default: () => {
                return {}
            }
        },
        type: {
            type: String,
            default: '',
        },
        width: {
            type: String,
            default: '180px',
        },
    })

    let keywords = ref<string>('');
    let filters = ref<FilterTimesRow[]>(getSearchFilters(props.type as string));
    let filtersItem = ref<FilterTimesRow>({
        value: '',
        label: '',
    });

    const filterLabel = computed(() => {
        return filtersItem.value.label;
    })
    const filterValue = computed(() => {
        return filtersItem.value.value;
    })

    let maxLabelLength: number = 0;
    for (let row of filters.value) {
        if (row.label.length > maxLabelLength) {
            maxLabelLength = row.label.length;
        }
    }
    const btnTextWidth = computed(() => {
        return `${maxLabelLength * 12 + 6}px`;
    })

    const setCommand = (value: string) => {
        if (filterValue.value === value) return;
        getFilters(value);
        if (keywords.value) {
            resetFilterParams();
            keywords.value = '';
            onChange();
        }
    }
    let filterParams = ref<{ [props: string]: any }>({});
    const resetFilterParams = () => {
        for (let row of filters.value) {
            filterParams.value[row.value] = '';
        }
    }
    const emit = defineEmits(['change']);
    const onChange = () => {
        filterParams.value[filterValue.value] = keywords.value;
        console.info(filterParams.value)
        emit('change', filterParams.value, filtersItem.value);
    }
    const getFilters = (value: string) => {
        for (let row of filters.value) {
            if (value === row.value) {
                filtersItem.value = row;
            }
        }
    }
    const getKeywords = (newValue: { [props: string]: any }) => {
        let filterKey: string = '';
        for (let row of filters.value) {
            if (newValue[row.value]) {
                filterKey = row.value as string;
                keywords.value = newValue[row.value] as string;
            }
        }
        if (!filterKey) {
            filterKey = filters.value[0].value as string;
        }
        getFilters(filterKey);
    }
    // 监听 弹窗显示隐藏
    watch(() => props.value, (newValue: { [props: string]: any }) => {
        getKeywords(newValue);
    }, {
        immediate: true,
        deep: true
    });
    watch(() => props.type, (newValue: string) => {
        resetFilterParams();
        filters.value = getSearchFilters(newValue);
        getKeywords(props.value);
    })
</script>

<style scoped lang="scss">
    :deep(.el-input__wrapper) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
</style>